<template>
  <div id="app">


    <el-form label-width="120px" style="margin-top: 20px" :inline="true">

      <div style="margin-left:40px;margin-bottom: 10px" >
        <el-button type="primary" icon="el-icon-search" @click="findNeeds">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh-right" @click="cleanInput">重置</el-button>
      </div>


      <el-form-item label="订单单号：">
        <el-input placeholder="请输入订单单号："
                  v-model="inputOrder"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="客户名称：">
        <el-input placeholder="请输入客户名称："
                  v-model="inputName"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="路线：">
        <el-input placeholder="请输入路线："
                  v-model="inputDeparture"
                  clearable></el-input>
      </el-form-item>

<!--      <el-form-item label="目的城市：">-->
<!--        <el-input placeholder="请输入客户名称："-->
<!--                  v-model="inputDestination"-->
<!--                  clearable></el-input>-->
<!--      </el-form-item>-->

    </el-form>

    <el-divider></el-divider>
    <div style="margin-left:40px">
      <el-button type="success" @click="refreshPage" v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-refresh" >刷新</el-button>
      <el-button type="primary" @click="submitNeed">提交<i class="el-icon-upload el-icon--right"></i></el-button>
    </div>


    <el-table
      :data="needs"
      ref="arr"
      tooltip-effect="dark"
      style="width: 100%;margin-left: 40px"
      @selection-change="selectionAll">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="orderId"
        label="订单单号">
      </el-table-column>

      <el-table-column
        prop="orderType"
        label="订单类型 ">
      </el-table-column>

      <el-table-column
        prop="transType"
        label="运输类型">
      </el-table-column>

      <el-table-column
        prop="cName"
        label="客户名称">
      </el-table-column>

      <el-table-column
        prop="cTime"
        label="下单时间"
        format='yyyy-MM-dd-HH-mm-ss'>
      </el-table-column>

      <el-table-column
        prop="route"
        label="路线">
      </el-table-column>

      <el-table-column
        prop="gNumber"
        label="总数量(个)">
      </el-table-column>

      <el-table-column
        prop="gWeight"
        label="总重量(千克)">
      </el-table-column>

      <el-table-column
        prop="gVolume"
        label="总体积(方)">
      </el-table-column>

      <el-table-column
        prop="operate"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="showAll(scope.row.orderId)" type="danger" size="small">查看</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage:1,
        pageSizes:[2,4,6],
        pageSize:2,
        total:0,
        needs:[],
        fullscreenLoading: false,
        inputOrder: '',
        inputName: '',
        inputDeparture: '',
        inputDestination: '',
        arr:[]
      }
    },
    methods: {
      showAll(id){
        //路由的页面跳转
        this.$router.push({path:'/order/watch',query:{id:id}});
      },
      findNeeds(){
        this.$http({
          method:"GET",
          url:"http://localhost/need/page",
          params:{
            currentPage:this.currentPage,
            pageSize:this.pageSize,
            inputOrder:this.inputOrder,
            inputName: this.inputName,
            inputDeparture: this.inputDeparture,
          }
        }).then(resp=>{
          console.log(resp.data);
          this.needs = resp.data.data.records;
          this.total = resp.data.data.total;
        })
      },
      refreshPage(){
        this.findNeeds();
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
        this.$message({
          message: '刷新成功',
          type: 'success'
        });
      },
      cleanInput(){
          this.inputOrder='';
          this.inputName='';
          this.inputDeparture='';
          // this.inputDestination='';
      },
      submitNeed(){
        if(this.arr.length > 0){
          console.log(this.arr);
          this.$http({
            method:"PUT",
            url:"http://localhost/need/submit",
            data:this.arr
          }).then(resp=>{
            this.$message({
              message: '提交成功',
              type: 'success'
            });
          })
        }
        this.findNeeds(1,2);
      },
      selectionAll(val){
        this.arr=val;
        console.log(this.arr);
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.findNeeds(this.currentPage,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.findNeeds(this.currentPage,this.pageSize);
      }
    },
    created() {
      this.findNeeds(1,2);
    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

  .div1{
    margin-left:40px;
    border-bottom: 1px;
  }

</style>
